<template>
    <view class="home">
        <view class="home-box">
            <!-- 头部 -->
            <view class="headers" :style="{ paddingTop: menuButtonT + 'px', width: '100%', height: customBarH + 'px' }">
                <view class="imgs" style="padding: 0 20rpx 0 40rpx">
                    <image class="image1" mode="widthFix" src="http://cdn.jxsr.com/logox.png" />
                </view>
                <view class="inps" style="-webkit-flex: 1; flex: 1"
                    :style="{ marginRight: customBarlef + customBarrig + 'px' }">
                    <view class="inputs" @click="search">
                        <image class="img" mode="widthFix" src="http://cdn.jxsr.com/search.png" />
                        <view class="inp_vie">搜索</view>
                    </view>
                </view>
            </view>
            <view class="lists" :style="{ marginTop: customBarlef + 'px', }">
                <view class="list_li" v-for="(item, index) in listData" :key="index" @tap="navigateTo(item.id)">
                    <image class="li_img" mode="aspectFill" :src="item.image" />
                    <view class="shop_xx">
                        <view class="name">
                            {{ item.name }}
                        </view>
                        <view class="jg">
                            <span class="sp1">¥<span>{{ item.vipPrice }}</span>/{{ item.size ? item.size : '斤' }}</span>
                            <span class="sp2">{{ item.benefit == 1 ? '特价' : '时价' }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { querySpecialOffers } from '@/utils/api.js';

export default {
    components: {},
    props: {},
    data() {
        return {
            statursBarH: getApp().globalData.statursBarH,
            customBarH: getApp().globalData.customBarH,
            menuButtonT: getApp().globalData.menuButtonT,
            customBarlef: getApp().globalData.customBarlef,
            customBarrig: getApp().globalData.customBarrig,

            listData: [],
            current: 1,
            pageSize: 100
        }
    },
    computed: {},
    watch: {},
    created() { },
    onLoad(options) {
        this.initData()
    },
    methods: {
        navigateTo(id) {
            uni.navigateTo({
                url: '/pages/goods/detail?id=' + id + '&sptype=ordinarysp',
            });
        },
        initData() {
            // 获取店铺数据
            querySpecialOffers({
                pageNum: this.current,
                pageSize: this.pageSize,
                isBenefit: 0,
            })
                .then((res) => {
                    if (res.code === 200) {
                        this.listData = res.data.products;
                        uni.stopPullDownRefresh();
                    } else {
                        uni.showToast({ title: '请求错误', position: 'bottom', icon: 'none' });
                    }
                })
                .catch((err) => {
                    uni.showToast({ title: '网络繁忙', position: 'bottom', icon: 'none' });
                });
        },
    },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { },
    deactivated() { },
}
</script>
<style lang='scss' scoped>
.home {
    height: 100%;

    .home-box {

        // 头部
        .headers {
            width: 100%;
            background-color: $backgroundColor;
            padding-bottom: 20rpx;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 200;
            display: flex;

            .imgs {
                display: flex;
                justify-content: center;
                align-items: center;

                .image1 {
                    width: 156rpx;
                    height: 40rpx;
                }

                .image2 {
                    width: 66rpx;
                    height: 60rpx;
                }
            }

            .inps {
                padding-right: 40rpx;
                display: flex;
                align-items: center;

                .inputs {
                    width: 100%;
                    height: 60rpx;
                    border-radius: 92rpx;
                    border: 2rpx solid $primaryTextColor;
                    background-color: #fff;
                    display: flex;
                    align-items: center;

                    .img {
                        width: 30rpx;
                        height: 32rpx;
                        margin-left: 20rpx;
                    }

                    .inp_vie {
                        font-size: 32rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }
}


.lists {
    width: 750rpx;
    padding: 40rpx 30rpx 0 30rpx;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .list_li {
        width: 330rpx;
        // height: 500rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        overflow: hidden;

        .li_img {
            width: 330rpx !important;
            height: 330rpx !important;
        }

        .shop_xx {
            padding: 10rpx 20rpx;

            .name {
                width: 100%;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: $mainText;
                line-height: 40rpx;
                min-height: 80rpx;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                /*要显示的行数*/
                -webkit-box-orient: vertical;
                margin-bottom: 10rpx;
            }

            .jg {
                .sp1 {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ff0000;
                    line-height: 48rpx;

                    span {
                        font-size: 40rpx;
                        line-height: 48rpx;
                    }
                }

                .sp2 {
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
    }
}
</style>